<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>栏目列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/index.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/index.js"></script>

    </head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">风采管理</a>
                <a>
                    <cite>活动列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">

                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="活动名" name="cate_name" id="title"></div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" data-type="reload">搜索</button>
                            </div>


                        </div>

                        <div class="layui-card-body ">
                            <table class="layui-hide" id="test" lay-filter="test"></table>
                        </div>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">添加研学风采</a>
                        </script>

                    </div>
                </div>
            </div>
        </div>
        <script>
            layui.use(['laydate', 'form', 'table'], function () {
                var laydate = layui.laydate;
                var form = layui.form;
                var table = layui.table;
                var $ = layui.jquery;


                table.render({
                    elem: '#test'
                    , url: '/admin/activity?opr=endlist'
                    , toolbar: true
                    , title: '活动列表'
                    , id: 'activitytable'
                    , cols: [[

                        {field: 'id', title: 'ID', width: 80, unresize: true, sort: true, totalRowText: '合计行'}
                        , {field: 'title', title: '活动名称', width: 180}
                        , {field: 'typeName', title: '活动类型', width: 100, sort: true, totalRow: true}
                        , {
                            field: 'actionTime',
                            title: '活动时间',
                            width: 140,

                            sort: true,
                            templet: "<div>{{layui.util.toDateString(d.actionTime, 'yyyy-MM-dd HH:mm')}}</div>"
                        }
                        , {field: 'position', title: '活动地点', width: 180, sort: true, totalRow: true}

                        , {field: 'pbName', title: '发布人', width: 120,}
                        , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}

                    ]]
                    , page: {
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , curr: 1 //设定初始在第 5 页
                        , groups: 2//只显示 1 个连续页码

                    }
                    , response: {
                        statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data//解析数据列表
                        };
                    }
                });

                //数据渲染结束
                //监听行工具
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                     if (obj.event === 'edit') {

                        xadmin.open("风采上传","multifileupload.html?"+data.id);

                    }
                });

                //重新渲染表格数据
                var $ = layui.$, active = {
                    reload: function () {
                        // 获取条件

                        var start = $("#start").val();
                        var end = $("#end").val();
                        var title = $("#title").val();

                        //执行重载
                        table.reload('activitytable', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: {
                                startTime: start,
                                endTime: end,
                                title: title,
                            }
                        });
                    }
                };
                // 按钮触发事件
                $('.layui-card .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                });


          });

        </script>
    </body>
</html>
